<template>
  <div class="process-box flex">
    <div class="flex submit-status">
      <span class="status-text font-14 font-color-3">提交订单</span>
      <span class="round" />
      <span class="process" />
      <div class="active-process-box flex">
        <span class="in-round" />
        <span class="right-in-process" />
      </div>
      <span class="time font-14 font-color-6">2020-08-20 12:57:33</span>
    </div>
    <div class="flex pay-status">
      <span class="status-text font-14 font-color-3">付款成功</span>
      <span class="left-process" />
      <span class="round" />
      <span class="right-process" />
      <div class="active-process-box flex">
        <span class="left-in-process" />
        <span class="in-round" />
        <span class="right-in-process" />
      </div>
      <span class="time font-14 font-color-6">2020-08-20 12:57:33</span>
    </div>
    <div class="distribution-status flex">
      <span class="status-text font-14 font-color-3">配货完成</span>
      <span class="left-process" />
      <span class="round" />
      <span class="right-process" />
      <div class="active-process-box flex">
        <span class="left-in-process" />
        <span class="in-round" />
        <span class="right-in-process" />
      </div>
      <span class="time font-14 font-color-6">2020-08-20 12:57:33</span>
    </div>
    <div class="ship-status">
      <span class="status-text font-14 font-color-3">已发货</span>
      <span class="left-process" />
      <span class="round" />
      <span class="right-process" />
      <div class="active-process-box flex">
        <span class="left-in-process" />
        <span class="in-round" />
        <span class="right-in-process" />
      </div>
      <span class="time font-14 font-color-6">2020-08-20 12:57:33</span>
    </div>
    <div class="finish-status">
      <span class="status-text font-14 font-color-3">订单完成</span>
      <span class="left-process" />
      <span class="round" />
      <div v-if="false" class="active-process-box flex">
        <span class="left-in-process" />
        <span class="in-round" />
      </div>
      <span class="time font-14 font-color-6">2020-08-20 12:57:33</span>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  setup() {

  }
})
</script>

<style lang="scss" scoped>
$roundWidth: 28px;
$processWidth: 111px;
$timespace: 113px;
.process-box {
  position: relative;
  .status-text {
    position: absolute;
    top: -20px;
  }
  .round {
    width: $roundWidth;
    height: $roundWidth;
    background: #efefef;
    border-radius: 50%;
  }
  .in-round {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #182245;
  }
  .process,.left-process,.right-process {
    width: $processWidth;
    height: 10px;
    background: #efefef;
    position: absolute;
    top: 9px;
  }
  .in-process, .left-in-process, .right-in-process {
    width: $processWidth + 4;
    height: 4px;
    background: #182245;
    position: absolute;
    top: 8px;
  }
  .active-process-box {
    position: absolute;
    top: 4px;
    .left-in-process {
      left: -($processWidth + 4);
    }
    .right-in-process {
      left: 20px;
    }
  }
  .submit-status {
    .status-text {
      left: -10px;
    }
    .process {
      left: $roundWidth;
    }
    .active-process-box {
      left: 4px;
    }
    .time {
      position: absolute;
      bottom: -30px;
      left: -54px;
    }
  }
  .pay-status {
    .status-text {
      left: $roundWidth + $processWidth * 2 - 10;
    }
    .round {
      position: absolute;
      left: $roundWidth + $processWidth * 2;
    }
    .left-process {
      left: $roundWidth + $processWidth * 2;
    }
    .right-process {
      left: $roundWidth * 2 + $processWidth * 2;
    }
    .active-process-box {
      left: $roundWidth + $processWidth * 2 + 4;
    }
    .time {
      position: absolute;
      bottom: -30px;
      left: 194px;
    }
  }
  .distribution-status {
    .status-text {
      left: $roundWidth * 2 + $processWidth * 4 - 10;
    }
    .round {
      position: absolute;
      left: $roundWidth * 2 + $processWidth * 4;
    }
    .left-process {
      left: $roundWidth * 2 + $processWidth * 4;
    }
    .right-process {
      left:  $roundWidth * 3 + $processWidth * 4;
    }
    .active-process-box {
      left: $roundWidth * 2 + $processWidth * 4 + 4;
    }
    .time {
      position: absolute;
      bottom: -30px;
      left: 442px;
    }
  }
  .ship-status {
    .status-text {
      left: $roundWidth * 3 + $processWidth * 6 - 10;
    }
    .round {
      position: absolute;
      left: $roundWidth * 3 + $processWidth * 6;
    }
    .left-process {
      left: $roundWidth * 3 + $processWidth * 5;
    }
    .right-process {
      left: $roundWidth * 4 + $processWidth * 6;
    }
    .active-process-box {
      left: $roundWidth * 3 + $processWidth * 6 + 4;
    }
    .time {
      position: absolute;
      bottom: -30px;
      left: 692px;
    }
  }
  .finish-status {
    .status-text {
      left: $roundWidth * 4 + $processWidth * 8 - 10;
    }
    .round {
      position: absolute;
      left: $roundWidth * 4 + $processWidth * 8
    }
    .left-process {
      left: $roundWidth * 4 + $processWidth * 7;
    }
    .active-process-box {
      left: $roundWidth * 4 + $processWidth * 8 + 4;
    }
    .time {
      position: absolute;
      bottom: -30px;
      left: 944px;
    }
  }
}
</style>

